<template>
  <Dialog
    v-model="show"
    @confirm="handleSubmit"
    @close="close"
    title="编辑轮播图"
    width="1000px"
  >
    <el-form :model="formData" label-width="80px" ref="formRef" :rules="rules">
      <el-form-item label="标题" prop="title">
        <el-input v-model="formData.title" />
      </el-form-item>
      <el-form-item label="轮播图" prop="items">
        <div class="flex flex-wrap gap-10 w-full">
          <div
            class="swiperItem"
            v-for="(item, index) in formData.items"
            :key="index"
          >
            <el-upload
              class="avatar-uploader flex_aic_jcc ml10 mt10"
              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              :show-file-list="false"
              :on-success="(v) => handleAvatarSuccess(v, index)"
              :before-upload="(v) => beforeAvatarUpload(v, index)"
            >
              <img v-if="item.img" :src="item.img" class="avatar" />
              <el-icon
                v-else
                class="w-full h-full avatar-uploader-icon"
                size="20"
                ><Plus
              /></el-icon>
            </el-upload>
            <div class="flex_aic_jcsb mt10 ml10 pr10">
              <div class="flex_aic">
                <span class="mr20">排序:</span>
                <el-button
                  type="primary"
                  size="small"
                  @click="handleSort(index, -1)"
                >
                  <el-icon><ArrowLeft /></el-icon>
                </el-button>
                <el-button
                  type="primary"
                  size="small"
                  @click="handleSort(index, 1)"
                >
                  <el-icon><ArrowRight /></el-icon>
                </el-button>
              </div>
              <img
                class="remove-icon cursor-pointer"
                src="@/assets/images/common/remove.png"
                alt=""
                @click="handleRemove(index)"
              />
            </div>
            <div class="flex_aic mt10 ml10 mr10">
              <span class="mr20 flex-shrink-0">链接:</span>
              <el-input v-model="item.url" class="flex1" />
            </div>
          </div>
          <div
            class="add-swiper-item flex_aic_jcc cursor-pointer"
            @click="handleAdd"
          >
            <el-icon :size="20" class="add-icon"><Plus /></el-icon>
          </div>
        </div>
      </el-form-item>
    </el-form>
  </Dialog>
</template>
<script setup>
import { ref, watch } from "vue";
import Dialog from "@/components/dialog.vue";
import UploadPictures from "@/components/uploadPictures.vue";
import { ArrowLeft, ArrowRight, Plus } from "@element-plus/icons-vue";

const show = defineModel();
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
});
watch(show, (val) => {
  if (val) {
    console.log(props.data);

    props.data.id && (formData.value = props.data);
  }
});
const formData = ref({
  title: "",
  items: [
    // {
    //   img: "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
    //   url: "https://www.baidu.com",
    //   sort: 1,
    // },
  ],
});
const rules = ref({
  title: [{ required: true, message: "请输入标题", trigger: "blur" }],
  items: [{ required: true, message: "请输入轮播图", trigger: "change" }],
});
const formRef = ref();
const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!");
    }
  });
};
const close = () => {
  formData.value.title = "";
  formData.value.items = [];
  show.value = false;
};

const handleAvatarSuccess = (v, index) => {
  formData.value.items[index].img = v.url;
};
const beforeAvatarUpload = (v, index) => {
  formData.value.items[index].img = v.url;
};
const handleSort = (index, type) => {
  formData.value.items.splice(
    index + type,
    0,
    formData.value.items.splice(index, 1)[0]
  );
};
const handleAdd = () => {
  console.log(formData.value);

  formData.value.items.push({
    img: "",
    url: "",
    sort: formData.value.items.length + 1,
  });
};
const handleRemove = (index) => {
  formData.value.items.splice(index, 1);
};
</script>
<style lang="scss" scoped>
.swiperItem {
  width: calc((100% - 10px) / 2);
  height: 306px;
  border: 1px solid #ccc;
  border-radius: 10px;

  .avatar-uploader {
    width: calc(100% - 20px);
    height: 200px;
    border: 1px dashed #ccc;
    border-radius: 10px;
  }
}

.add-swiper-item {
  width: calc((100% - 10px) / 2);
  height: 306px;
  border: 1px dashed #ccc;
  border-radius: 10px;
}
.remove-icon {
  width: 16px;
  height: 16px;
}
</style>
